<template>
    <!-- 主内容区域 - 半包围结构 -->
    <div class="main-layout">
        <!-- 左侧次要指标区域 -->
        <div class="left-sidebar">
            <div class="left-top-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">调解概览</div>
                        <div class="wrap-box">
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="left-middle-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">司法所概述</div>
                        <div class="row-box">
                            <div class="column-box">
                                <div>999所</div>
                                <img style="width: 40px;height: 50px;" src="../../assets/tab0/img1.png" alt="">
                                <div>司法所数量</div>
                            </div>
                            <div style="width: 100%;height: 100%;">
                                <div id="leftChart" style="width: 100%;height: 200px;">
                                </div>
                            </div>

                        </div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="left-bottom-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">司法所概述</div>
                        <div class="wrap-box">
                            <div class="wrap-item column-box" style="margin-right: 20px;margin-left: 20px;">
                                <div class="value">999</div>
                                <div class="second-value">矫正对象</div>
                            </div>
                            <div class="wrap-item column-box" style="margin-right: 20px;margin-left: 20px;">
                                <div class="value">999</div>
                                <div class="second-value">矫正对象</div>
                            </div>
                            <div class="wrap-item column-box">
                                <div class="value">999</div>
                                <div class="second-value">矫正对象</div>
                            </div>
                            <div class="wrap-item column-box">
                                <div class="value">999</div>
                                <div class="second-value">矫正对象</div>
                            </div>
                            <div class="wrap-item column-box">
                                <div class="value">999</div>
                                <div class="second-value">矫正对象</div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
        </div>

        <!-- 中间主视觉区域 -->
        <div class="main-content">
            <!-- 中上主要指标区域 -->
            <div class="main-top" ref="mapRef">
            </div>

            <!-- 中下次要图表区域 -->
            <div class="main-bottom">
                <div class="left-bottom-main">
                    <dv-border-box-13>
                        <div class="box-content">
                            <div class="title">基础公共法律服务</div>
                            <div class="row-box">
                                <div class="column-box">
                                    <div class="column-box">
                                        <div class="value">999</div>
                                        <div class="second-value">法制咨询</div>
                                    </div>
                                    <div class="column-box">
                                        <div class="value">999</div>
                                        <div class="second-value">法制咨询</div>
                                    </div>
                                    <div class="column-box">
                                        <div class="value">999</div>
                                        <div class="second-value">法制咨询</div>
                                    </div>
                                </div>
                                <div id="leftMainChart" style="width: 500px; height: 200px;"></div>
                            </div>
                        </div>
                    </dv-border-box-13>
                </div>
                <div class="right-bottom-main">
                    <dv-border-box-13>
                        <div class="box-content">
                            <div class="title">年度调解业务量</div>
                            <div>单位: 件</div>
                            <div id="rightMainChart" style="width: 500px; height: 200px;"></div>
                        </div>
                    </dv-border-box-13>
                </div>
            </div>
        </div>

        <!-- 右侧次要指标区域 -->
        <div class="right-sidebar">
            <div class="right-top-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">区域概况</div>
                        <div class="wrap-box">
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="wrap-item">
                                <dv-border-box-10>
                                    <div class="row-box">
                                        <img style="width: 40px;height: 40px;" src="../../assets/tab0/img1.png" alt="">
                                        <div class="column-box">
                                            <div class="value">2</div>
                                            <div>3</div>
                                        </div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="right-middle-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">司法所概述</div>
                        <div class="row-box">
                            <div class="column-box">
                                <div>999所</div>
                                <img style="width: 40px;height: 50px;" src="../../assets/tab0/img1.png" alt="">
                                <div>司法所数量</div>
                            </div>
                            <div style="width: 100%;height: 100%;">
                                <div id="rightChart" style="width: 100%;height: 200px;">
                                </div>
                            </div>

                        </div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="right-bottom-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">基础法律服务概览</div>
                        <div class="wrap-box">
                            <div class="row-box">
                                <div class="second-title"> 法律法务服务站</div>
                                <div class="column-box">
                                    <!-- 虚线 -->
                                    <div class="column-box"
                                        style="border-bottom: 1px dashed #064e76;padding-bottom: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                    <div class="column-box" style="padding-top: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-box">
                                <div class="second-title"> 法律法务服务站</div>
                                <div class="column-box">
                                    <!-- 虚线 -->
                                    <div class="column-box"
                                        style="border-bottom: 1px dashed #064e76;padding-bottom: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                    <div class="column-box" style="padding-top: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-box">
                                <div class="second-title"> 法律法务服务站</div>
                                <div class="column-box">
                                    <!-- 虚线 -->
                                    <div class="column-box"
                                        style="border-bottom: 1px dashed #064e76;padding-bottom: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                    <div class="column-box" style="padding-top: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-box">
                                <div class="second-title"> 法律法务服务站</div>
                                <div class="column-box">
                                    <!-- 虚线 -->
                                    <div class="column-box"
                                        style="border-bottom: 1px dashed #064e76;padding-bottom: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                    <div class="column-box" style="padding-top: 10px;">
                                        <div class="value">333</div>
                                        <div class="second-value">咨询员</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-box" style="gap: 10px;">
                                <div class="second-value"> 人民督察员</div>
                                <div class="value"> 200</div>
                            </div>
                            <div class="row-box" style="gap: 10px;">
                                <div class="second-value"> 人民陪审员</div>
                                <div class="value"> 200</div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from 'vue';
import hunanJson from './hunan.json';
// 定义地图容器引用
const mapRef = ref(null);
// 图表实例变量
let chart = null;
// 初始化地图
const initMap = () => {
    // 注册地图数据
    echarts.registerMap('湖南', hunanJson);

    // 获取DOM元素并初始化图表
    if (mapRef.value) {
        chart = echarts.init(mapRef.value);

        // 标记点数据（可根据实际需求修改）
        const markPoints = [
            {
                name: '韶关市', coord: [111.902613,
                    28.021982]
            },
        ];

        // 地图配置项
        const option = {
            series: [
                {
                    type: 'map',
                    mapType: '湖南',
                    label: {
                        show: true,
                        color: '#ffffff' // 城市名称文字颜色
                    },
                    itemStyle: {
                        areaColor: '#2196f3', // 地图区域底色
                        borderColor: '#ffffff', // 区域边框颜色
                        borderWidth: 1
                    },
                    emphasis: {
                        // 鼠标悬停时的样式
                        itemStyle: {
                            areaColor: '#42a5f5'
                        }
                    },
                    markPoint: {
                        // 标记点样式
                        symbol: 'circle',
                        symbolSize: 12,
                        itemStyle: {
                            color: '#ffeb3b' // 标记点颜色
                        },
                        label: {
                            show: false
                        },
                        data: markPoints.map(item => ({
                            name: item.name,
                            coord: item.coord
                        }))
                    }
                }
            ]
        };

        // 设置配置项并渲染
        chart.setOption(option);
    }
};
// 窗口大小变化时重绘
const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};
onMounted(() => {
    initMap();
    window.addEventListener('resize', handleResize);
    let chartRightMain = document.getElementById('rightMainChart');
    let rightMainChart = echarts.init(chartRightMain);
    let rightMainOption;

    rightMainOption = {
        title: {
            text: '月度案件数量统计',
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b}月<br/>案件数量：{c}件'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 14
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 5000,
            interval: 1000,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ccc',
                formatter: '{value} 件',
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.2)'
                }
            }
        },
        series: [
            {
                name: '案件数量',
                type: 'bar',
                barWidth: '60%',
                data: [4400, 3500, 3100, 3700, 3300, 2800, 3350, 4200, 3850, 3500, 2700, 2000],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0,
                        [
                            { offset: 0, color: '#00bfa5' },
                            { offset: 1, color: '#ffeb3b' }
                        ]
                    ),
                    borderRadius: [4, 4, 0, 0]
                },
                label: {
                    show: false, // 若需显示柱顶数值，可设为true并调整样式
                    position: 'top',
                    color: '#fff',
                    fontSize: 12
                }
            }
        ]
    };
    rightMainOption && rightMainChart.setOption(rightMainOption);

    let chartLeftMain = document.getElementById('leftMainChart');
    let leftMainChart = echarts.init(chartLeftMain);
    let leftMainOption;

    leftMainOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: ['代书文书', '法律咨询', '法律诉讼', '法律意见', '法律审查'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 14
            }
        },
        xAxis: {
            type: 'value',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ccc',
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(204, 204, 204, 0.2)'
                }
            }
        },
        series: [
            {
                name: '业务数量',
                type: 'bar',
                barWidth: '40%',
                data: [7123, 9200, 8430, 4520, 6211],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: '#00bfa5' },
                            { offset: 1, color: '#64b5f6' }
                        ]
                    ),
                    borderRadius: [0, 6, 6, 0]
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 'bold'
                }
            }
        ]
    };
    leftMainOption && leftMainChart.setOption(leftMainOption);

    let chartRight = document.getElementById('rightChart');
    let rightChart = echarts.init(chartRight);
    let rightOption;

    rightOption = {
        legend: {
            orient: 'vertical', // 水平排列
            right: 0, // 距离底部10px
            bottom: 60, // 距离底部10px
            itemWidth: 12, // 图例标记的宽度
            itemHeight: 12, // 图例标记的高度
            textStyle: {
                fontSize: 10, // 图例文字大小
                color: '#fff'
            },
            data: ['民事案件', '刑事案件', '行政案件', '其他案件']
        },
        series: [
            {
                // name: '案件类型分布',
                type: 'pie',
                radius: ['40%', '70%'], // 外层饼图半径范围
                center: ['40%', '50%'], // 设置相同的圆心位置
                data: [
                    { value: 350, name: '民事案件', itemStyle: { color: '#ff99cc' } },
                    { value: 350, name: '刑事案件', itemStyle: { color: '#cccccc' } },
                    { value: 150, name: '行政案件', itemStyle: { color: '#cc99ff' } },
                    { value: 150, name: '其他案件', itemStyle: { color: '#ffcc66' } }
                ],
                label: {
                    position: 'inner',
                    formatter: '{b}\n{d}%',
                    fontSize: 10
                },
                labelLine: {
                    show: false
                },
                tooltip: {
                    formatter: '{a} <br/>{b}: {c} 件 ({d}%)'
                }
            },
            {
                type: 'pie',
                radius: ['0%', '30%'], // 内层环形半径范围
                center: ['40%', '50%'], // 设置相同的圆心位置
                data: [
                    {
                        value: 1000,
                        name: '案件数量',
                        itemStyle: { color: 'transparent' }, // 环形背景透明
                        label: {
                            show: true,
                            position: 'center',
                            formatter: '{c}\n案件数量',
                            color: '#00ccff',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 20
                        },
                        labelLine: { show: false }
                    }
                ]
            }
        ]
    };
    rightOption && rightChart.setOption(rightOption);

    let chartLeft = document.getElementById('leftChart');
    let leftChart = echarts.init(chartLeft);
    let leftOption;

    leftOption = {
        legend: {
            orient: 'vertical', // 水平排列
            right: 0, // 距离底部10px
            bottom: 60, // 距离底部10px
            itemWidth: 12, // 图例标记的宽度
            itemHeight: 12, // 图例标记的高度
            textStyle: {
                fontSize: 10, // 图例文字大小
                color: '#fff'
            },
            data: ['民事案件', '刑事案件', '行政案件', '其他案件']
        },
        series: [
            {
                // name: '案件类型分布',
                type: 'pie',
                radius: ['40%', '70%'], // 外层饼图半径范围
                center: ['40%', '50%'], // 设置相同的圆心位置
                data: [
                    { value: 350, name: '民事案件', itemStyle: { color: '#ff99cc' } },
                    { value: 350, name: '刑事案件', itemStyle: { color: '#cccccc' } },
                    { value: 150, name: '行政案件', itemStyle: { color: '#cc99ff' } },
                    { value: 150, name: '其他案件', itemStyle: { color: '#ffcc66' } }
                ],
                label: {
                    position: 'inner',
                    formatter: '{b}\n{d}%',
                    fontSize: 10
                },
                labelLine: {
                    show: false
                },
                tooltip: {
                    formatter: '{a} <br/>{b}: {c} 件 ({d}%)'
                }
            },
            {
                type: 'pie',
                radius: ['0%', '30%'], // 内层环形半径范围
                center: ['40%', '50%'], // 设置相同的圆心位置
                data: [
                    {
                        value: 1000,
                        name: '人员数量',
                        itemStyle: { color: 'transparent' }, // 环形背景透明
                        label: {
                            show: true,
                            position: 'center',
                            formatter: '{c}\n人员数量',
                            color: '#00ccff',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 20
                        },
                        labelLine: { show: false }
                    }
                ]
            }
        ]
    };
    leftOption && leftChart.setOption(leftOption);
})
</script>

<style lang="scss" scoped>
.map-container {
    width: 100%;
    height: 500px;
}

.main-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.box-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.title {
    font-weight: bold;
}

.wrap-box {
    display: flex;
    flex-wrap: wrap;
}

.row-box {
    display: flex;
    padding: 10px 0 10px 16px;
}

.column-box {
    display: flex;
    flex-direction: column;
}

// 左右侧边栏样式
.left-sidebar,
.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 900px;

    .left-top-siderbar,
    .right-top-siderbar {
        flex: 1;

        .box-content {
            .wrap-box {
                row-gap: 20px;
                column-gap: 9%;

                .wrap-item {
                    width: 45%;

                    .row-box {
                        align-items: center;
                        gap: 10px;

                        .column-box {
                            gap: 6px;
                        }
                    }
                }
            }
        }

    }

    .left-middle-siderbar,
    .right-middle-siderbar {
        flex: 2;

        .box-content {
            .row-box {
                justify-content: space-between;
                align-items: center;

                .column-box {
                    gap: 26px;
                }

            }
        }
    }

    .left-bottom-siderbar {
        flex: 3;

        .title {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .box-content {
            .wrap-box {
                row-gap: 40px;
                justify-content: space-around;

                .wrap-item {
                    justify-content: space-between;
                    align-items: center;
                    gap: 16px;
                    padding: 26px;
                    background-color: #024868;

                    .value {
                        font-size: 24px;
                        font-weight: bold;
                        color: #02a7f0;
                    }

                    .second-value {
                        font-size: 10px;
                    }
                }
            }
        }
    }

    .right-bottom-siderbar {
        flex: 3;

        .box-content {
            .wrap-box {
                row-gap: 10px;
                column-gap: 6%;

                .row-box {
                    justify-content: start;
                    align-items: center;
                    width: 45%;
                    padding: 0;
                    border: 1px solid #0297d9;

                    .second-title {
                        padding: 10px 10px 10px 6px;
                        background-color: #00737d;
                        writing-mode: vertical-rl;
                        font-weight: bold;
                        color: white;
                    }

                    .column-box {
                        justify-content: center;
                        align-items: center;
                        width: 100%;

                        .column-box {
                            display: flex;
                            flex-direction: column;
                            gap: 6px;
                            width: 100%;

                            .value {
                                font-size: 24px;
                                font-weight: bold;
                                color: #02a7f0;
                            }

                            .second-value {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }

}

// 中间主内容区域
.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.main-top {
    flex: 2;
}

.main-bottom {
    flex: 1;
    display: flex;
    gap: 20px;

    .left-bottom-main {
        flex: 1;

        .title {
            margin-bottom: 20px;
        }

        .box-content {
            .row-box {
                align-items: center;
                gap: 16px;
                padding: 0;

                .column-box {
                    gap: 10px;

                    .column-box {
                        gap: 12px;

                        .value {
                            font-size: 24px;
                            color: #02a7f0;
                        }

                        .second-value {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .right-bottom-main {
        flex: 1;

        .box-content {}
    }
}
</style>